#include("common.html")
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>商品列表</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <meta name="full-screen" content="yes">
    <meta name="x5-fullscreen" content="true">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="#(tpath)/static/css/element.css">
    <link rel="stylesheet" type="text/css" href="#(tpath)/static/css/basic.css">
    <link rel="stylesheet" type="text/css" href="#(tpath)/static/css/filter.css">
    <script src="#(tpath)/static/js/jquery.js"></script>
    <script src="#(tpath)/static/js/common.js"></script>
  </head>
  
  <body>
	#include("header.html")
    <style type="text/css">#cate { background: #f6f6f6; } .catalog_bg { background: #f3f3f3; } .col-main .catalog_top { background: #fff; margin: 0 auto; margin-top: 5px; } .col-main .row { position: relative; border-bottom: 1px solid #eee; *zoom: 1; font-size: 14px; margin: 0; padding: 0px; } .col-main .row .row-title, .col-main .row .item { float: left; color: #666; } .col-main .row .row-title { height: 40px; line-height: 35px; } .col-main .row-title { width: 76px; color: #b1afb0!important; } .col-main .row .row-content { padding-bottom: 6px; } .col-main .row-content { height: 35px; overflow: hidden; *zoom: 1; } .searchitem { margin: 7px 20px 5px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 3px 30px 3px 10px; float: left; color: #666; position: relative; } .col-main .row .row-content .item { width: 96px; margin: 7px 20px 5px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .col-main .row .item { margin: 6px 50px 0 0; padding: 3px 0; white-space: nowrap; } .col-main .row .row-title, .col-main .row .item { float: left; color: #666; } .col-main .row-content:after { content: '\20'; display: block; height: 0; clear: both; } .col-main .row .row-brand { min-height: 110px; } .col-main .row-extra { position: absolute; top: 0; right: 10px; padding-right: 10px; } .col-main .row-extra .item { position: relative; margin-right: -12px; } .sort_brand li { float: left; padding: 2px 6px; border: 1px solid #ccc; margin-right: 10px; margin-top: 9px; background: #fff; font-size: 14px; margin-bottom: 5px; color: #666; } .col-main .row .row-content a:hover{ color: #c93229; } .aahover { background: transparent; color: #c93229; border: none; } .col-main .row .row-content .item_commen { width: 48px; height: 25px; text-align: center; white-space: nowrap; margin-top: 10px; line-height: 25px; color: #666; } .col-main .row .item_default { float: left; } .col-main .row .item_pricesn { float: left; color: #666; width: 48px; text-align: center; padding-left: 0px; } .col-main .row .item_pricesn1 { float: left; background: url(/static/pc/imgs/arrowdown.png) no-repeat 45px 7px; color: #c93229; } .col-main .row .item_pricesn2 { float: left; background: url(/static/pc/imgs/arrowup.png) no-repeat 45px 7px; color: #c93229; } .col-main .row .item_commen2 { width: 48px; height: 25px; padding-left: 12px; white-space: nowrap; margin-top: 10px; line-height: 25px; } .col-main a.available2 { float: right; background: url(/static/pc/imgs/avlblack.jpg) no-repeat; margin: 15px 0 0 20px; color: #666; padding: 0px 0 1px 25px; } .col-main a.available1 { float: right; background: url(/static/pc/imgs/avlred.jpg) no-repeat; margin: 15px 0 0 20px; color: #666; padding: 0px 0 1px 25px; } .col-main .row-sort { width: 1200px; margin: 10px auto 0 auto; border-bottom: none; } .col-main .mod-list li { transition-property: box-shadow; transition-duration: 1s; -moz-transition-property: box-shadow; -moz-transition-duration: 1s; -webkit-transition-property: box-shadow; -webkit-transition-duration: 1s; -o-transition-property: box-shadow; -o-transition-duration: 1s; } .col-main .mod-item { border:2px solid #fff; background-color: #fff; font-size: 12px; text-align: center; position: relative; } .col-main .mod-item img{ max-width: 225px; max-height: 225px; } .col-main .mod-item .name { display: block; color: #413f40; font-size: 14px; height: 38px; line-height: 16px; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; } .col-main .mod-item .price { font-size: 14px; } .col-main .mod-item .price_pmt { color: #f15151; } .col-main .mod-item .cankao { color: #999; font-size: 12px; margin-left: 5px; } .col-main .mod-item .price del { color: #999; margin-left: 10px; font-size: 12px; } .col-main .list-item { position: relative; float: left; width: 230px; height: 312px; overflow: hidden; margin: 5px 5px 10px 5px; background: #fff; } .col-main .mod-item .extra .cart_btn { display: none; margin: 0 0 6px; background: url(/static/pc/imgs/icon_cart.png) 47px 2px no-repeat #fff; border: none; cursor: pointer; width: 55px; height: 25px; position: absolute; top: 10px; right: 10px; font-size: 12px; line-height: 25px; text-align: left; padding: 0 10px; border-radius: 15px; border: 1px solid #dedede; opacity: 0.9; } .col-main .mod-item .extra .btn_like { display: none; background: url(/static/pc/imgs/like.png) 8px 2px no-repeat #fff; border: none; width: 46px; height: 25px; position: absolute; top: 10px; right: 10px; font-size: 12px; text-align: right; line-height: 25px; padding: 0 10px; border-radius: 15px; border: 1px solid #dedede; opacity: 0.9; } .col-main .mod-item .extra .cart_btn span { color: #000; position: relative; } .col-main .mod-item .extra .btn_like span { color: #000; position: relative; } .col-main .mod-item .price .DiscountPercent { position: absolute; top: 15px; left: 15px; width: 72px; height: 22px; line-height: 22px; text-align: center; background: #f15151; color: #fff; font-size: 14px; } .col-main .mod-item .price .DiscountPercent span { margin-left: 5px; } .mod-item .flags { position: absolute; left: 0; bottom: 0; width: 100%; max-height: 40px; font-size: 12px; text-align: left; overflow: hidden; } .mod-item .flags .flag_background { background-color: #f15151; } .mod-item .flags .flag { height: 20px; text-align: center; font-size: 12px; line-height: 20px; padding: 1px 20px; color: #fff; } .fr { float: right; } .pagination { display: inline-block; padding-left: 0; margin: 20px 0; border-radius: 4px; } .pagination > li { display: inline; } .pagination-sm > li:first-child > a, .pagination-sm > li:first-child > span { border-top-left-radius: 0px; border-bottom-left-radius: 0px; } .pagination > li:first-child > a, .pagination > li:first-child > span { margin-left: 0; border-top-left-radius: 0px; border-bottom-left-radius: 0px; } .pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > span:hover, .pagination > .active > a:focus, .pagination > .active > span:focus { z-index: 2; color: #fff; cursor: default; background-color: #f15151; border-color: #f15151; } .pagination-sm > li > a, .pagination-sm > li > span { padding: 5px 10px; font-size: 14px; } .pagination > li > a, .pagination > li > span { position: relative; float: left; padding: 6px 12px; margin-left: -1px; line-height: 1.42857143; color: #666; text-decoration: none; background-color: #fff; border: 1px solid #ddd; } .mod-item:hover>.xincar>.cart_btn{ display: inline-block; } .mod-item:hover>.xincar>.btn_like{ display: inline-block; } .col-main .row .row-content a.aahover1 { background: #fff; color: #666666; border: 1px solid #666666; } .col-main .row-selected .item { position: relative; height: 24px; line-height: 24px; padding: 0 23px 0 10px; background-color: #3778d2; } .col-main .row-selected .icon-delete { position: absolute; top: 7px; right: 8px; display: inline-block; width: 11px; height: 11px; background: url(#(base)/static/images/delete.png)
      no-repeat #666666 2px 2px; } .col-main .mod-empty { margin-top: 20px; padding: 30px; border: 1px solid #ddd; color: #666; background: #fff; } .col-main .mod-empty .title { margin-bottom: 25px; font-size: 18px; color: #333; } .red { color: #e58277 !important; } .col-main .mod-empty .suggest { margin: 5px 0 0 18px; line-height: 20px; list-style: decimal; font-size: 12px; } #down001:hover{ color: #e58277; } .goods-stock{ position: absolute; width: 225px; height: 225px; opacity:0.5; background-color: #000; left: 0px; top: 0px; text-align: center; color: #fff; font-size: 20px; font-weight: 600; z-index: 200; padding-top: 72px; box-sizing: border-box; } .goods-img{ width: 225px; height: 225px; text-align: center; position: relative; } .goods-seckill{ position: absolute; top: 0px; left: 0px; } .miao_tag{ padding: 2px 5px; background-color:#f15151; color: #fff; border-radius: 4px; font-size: 12px; }</style>
    <div id="search">
      <div class="col-main">
        <div class="catalog_bg">
          <div class="catalog_top" style="position: relative;">
            <div class="allwarp">
              <dl class="row row-selected">
                <dt class="row-title">已选条件:</dt>
                <dd class="row-content">
                  
                  #if(keyword??)
                  <a href="#" class="searchitem aahover1">搜索词：#(keyword) 
                    <i class="icon-delete" val="#(productListUrl(productCategoryId,brandId,null,pageNumber,orderBy))"></i></a>
                  #end 
                  
                  #if(tag??)
                  <a href="#" class="searchitem aahover1">搜索词：#(tag) 
                    <i class="icon-delete" val="#(productListUrl(productCategoryId,brandId,null,pageNumber,orderBy))"></i></a>
                  #end 
                  
                  #if(currentProductCategory??)
                  <a href="#" class="searchitem aahover1">分类：#(currentProductCategory.name)
                    <i class="icon-delete" val="#(productListUrl(null,brandId,keyword,pageNumber,orderBy))"></i></a>
                  #end 
                  
                  #if(currentBrand??)
                  <a href="#" class="searchitem aahover1">品牌：#(currentBrand.name)
                    <i class="icon-delete" val="#(productListUrl(productCategoryId,null,keyword,pageNumber,orderBy))"></i></a>
                  #end 
                  <!---->
                  <!----></dd>
              </dl>
              <dl class="row row-catalog">
                <dt class="row-title">分类：</dt>
                <dd class="row-content row-cat">
                  #product_category_root_list()
          		  #for(productCategory : productCategorys)
                  <a href="#(productListUrl(productCategory.id,brandId,keyword,pageNumber,orderBy))" class="item">#(productCategory.name)</a>
                  #end
                  #end
                </dd>
              </dl>
              <dl class="row row-brand">
                <dt class="row-title">品牌:</dt>
                <dd class="row-content row-brand" style="height: 70px;">
                  #brand_list()
                  #for(brand : brands)
                  <a href="#(productListUrl(productCategoryId,brand.id,keyword,pageNumber,orderBy))" class="item">#(brand.name)</a>
                  #end
                  #end
                  <div class="cl"></div>
                </dd>
              </dl>
            </div>
          </div>
          <div>
            <div class="row row-sort">
              <div class="row-content">
                <a href="#(productListUrl(productCategoryId,brandId,keyword,pageNumber,''))" class="item_default item_commen ">
                  <span #if(orderBy??) #else class="aahover"#end>默认</span></a>
                <a href="#(productListUrl(productCategoryId,brandId,keyword,pageNumber,'price'))" class="item_commen2 item_pricesn " style="border-left: 1px solid rgb(222, 222, 222); border-right: 1px solid rgb(222, 222, 222);">
                  <span #if(orderBy?? && orderBy=="price") class="aahover"#end>价格</span></a>
                <!---->
                <!---->
                <a href="#(productListUrl(productCategoryId,brandId,keyword,pageNumber,'sales'))" class="item_commen2 item_pricesn ">
                  <span #if(orderBy?? && orderBy=="sales") class="aahover"#end>销量</span></a>
                <!---->
                <!----></div>
            </div>
            <ul id="product_list_box" class="mod-list">
              <!-- list start -->
              #for(product : page.list)
              <li class="list-item A1">
                <div class="mod-item">
                  <!---->
                  <!---->
                  <a href="#(product.path)" target="_blank" class="pic" style="background-image: none;">
                    <div class="goods-img">
                      <img src="#(imageUrl(product.image))"></div>
                  </a>
                  <a href="#(product.path)" target="_blank" class="name">
                    <!-- <span class="el-tag el-tag--mini" effect="dark" style="background-color: rgb(103, 194, 58); color: rgb(255, 255, 255);">#(product.tag)</span> -->
                    <!---->#(product.name)</a>
                  <div class="price">
				  <!---->
				  <span>
				    <span style="color: rgb(153, 153, 153);"></span>
				    <span style="color: rgb(136, 76, 255);">￥#(product.price)</span></span>
				  <!-- <span class="cankao">库存：13瓶</span> -->
				  <div class="cl"></div>
				  <!---->
				  <!-- <span class="cankao">￥#(product.price)</span> --></div>
                  
                  </div>
              </li>
              #end
              <!-- list end -->
              <div class="cl"></div>
            </ul>
            #pagination(pageNumber = page.pageNumber,totalPages = page.totalPage,pattern = "")
				<div class="allwarp">
              <div class="fr" style="margin-top: 50px;">
                <div class="el-pagination is-background">
                  <span class="el-pagination__total">共 #(page.totalRow) 条</span>
                  <button type="button" #if(hasPrevious) onclick="location.href='#(productListUrl(productCategoryId,brandId,keyword,previousPageNumber,orderBy))'" #else disabled="disabled" #end class="btn-prev">
                    <i class="el-icon el-icon-arrow-left"></i>
                  </button>
                  <ul class="el-pager">
                  	#for(segmentPageNumber : segment)
						#if(segmentPageNumber != pageNumber)
							<li class="number" onclick="location.href='#(productListUrl(productCategoryId,brandId,keyword,segmentPageNumber,orderBy))'">#(segmentPageNumber)</li>
						#else
							<li class="number active">#(segmentPageNumber)</li>
						#end
					#end
                  <button type="button" class="btn-next" #if(hasNext) onclick="location.href='#(productListUrl(productCategoryId,brandId,keyword,nextPageNumber,orderBy))'" #else disabled="disabled" #end>
                    <i class="el-icon el-icon-arrow-right"></i>
                  </button>
                </div>
              </div>
              <div class="cl"></div>
            </div>			        
			#end
          </div>
          <br>
          <br>
          <br></div>
      </div>
    </div>
    #include("footer.html")
  </body>
</html>
<script type="text/javascript">
$(".icon-delete").on("click",function(){
	var href = $(this).attr("val");
	location.href=href;
});
</script>